
import React, { useState, useEffect } from 'react'
import { Layout, Menu, Row, Col, Button, Table, Progress, Spin } from 'antd';
import HeaderBox from '@/components/header'
import FooterBox from '@/components/footer'
import UserMenu from '@/components/userMenu'
import API from '@/api/api'
import Funs from '@/utils/Funs'
import coinBtc from '../../assets/img/icon/btc.png'
import coinEth from '../../assets/img/icon/eth.png'
import coinUsdt from '../../assets/img/icon/usdt.png'
import coinIpfs from '../../assets/img/icon/ipfs.png'
import powerAll from '../../assets/img/power-all.png'
import powerDetail from '../../assets/img/power-detail.png'
import './index.scss';
const { Content } = Layout;
const { Column } = Table;

function Home(props) {
    const [load, setLoad] = useState(false)
    const [coinIndex, setCoinIndex] = useState(0)
    const [coinList, setCoinList] = useState()
    const [dailyList, setDailyList] = useState([])
    const [eachList, setEachList] = useState([])
    const [output, setOutput] = useState(0)
    const [price, setPrice] = useState(0)
    const [power, setPower] = useState(0)
    const [typeIndex, setTypeIndex] = useState(0)
    const [typeList, setTypeList] = useState([
        { name: '全部' },
        { name: '生效中' },
        { name: '已完成' }
    ])

    const coinImg = { 'BTC': coinBtc, 'ETH': coinEth, 'USDT': coinUsdt, 'FIL': coinIpfs }

    const columns = [
        {
            title: '订单号',
            dataIndex: 'orderId',
            key: 'orderId',
        },
        {
            title: '收入',
            dataIndex: 'award',
            key: 'award',
        },
        {
            title: '当前期数',
            dataIndex: 'current',
            key: 'current',
        },
        {
            title: '总期数',
            dataIndex: 'total',
            key: 'total',
        },
        {
            title: '时间',
            dataIndex: 'time',
            key: 'time',
        },
    ];

    const dataSource = [
        {
            key: '1',
            orderId: '151511BTDI',
            award: '0.0000451 BTC',
            current: 1,
            total: 480,
            power: 10,
            time: '2021/02/22',
            bind: true,
        },
        {
            key: '2',
            orderId: '151511BTDI',
            award: '0.0000451 BTC',
            current: 1,
            total: 480,
            power: 10,
            time: '2021/02/22',
            bind: false,
        }
    ];

    useEffect(() => {
        getWallet()
    }, [])

    const getWallet = async () => {
        let res = await API.wallet()
        if (res) {
            let list = Object.values(res.data)
            setCoinList(list)
            getUser(list[0].name)
        }
    }

    const getUser = async (name) => {
        let opts = { coinName: name }
        let res = await API.getUser(opts)
        setLoad(true)
        if (res && res.data) {
            setDailyList(res.data.orders.daily)
            setEachList(res.data.orders.each)
            setOutput(res.data.output.total)
            setPrice(res.data.output.price.total)
            setPower(res.data.power)
            setCoinList(res.data.packages)
            setLoad(false)
        } else {
            setLoad(false)
        }
    }

    const selectCoin = index => {
        setCoinIndex(index)
        getUser(coinList[index].name)
    }

    const setType = index => {
        setTypeIndex(index)
    }

    const coinItem = (value, index) => {
        return (
            <Col className={coinIndex === index ? "coin-item-active" : "coin-item"} span={5} key={index} onClick={() => selectCoin(index)}>
                <img className="coin-item-img" src={coinImg[value.name]} />
                <div className="coin-item-desc">
                    <span className="title">{value.name}</span>
                    <span>{coinList && coinList[coinIndex].total}个套餐正在挖矿</span>
                </div>
            </Col>
        )
    }

    const typeItem = (value, index) => {
        return (
            <div className={typeIndex === index ? "type-item-active" : "type-item"} key={index} onClick={() => setType(index)}>
                {value.name}
            </div>
        )
    }

    return (
        <Layout className="layout">
            <HeaderBox />
            <Content>

                <Row className="dashboard main" justify="space-between">
                    <Col lg={4} md={20}>
                        <UserMenu current="1" />
                    </Col>
                    <Col className="dashboard-right" lg={19} md={20}>
                        <Row>
                            {
                                coinList && coinList.map((value, index) => {
                                    return coinItem(value, index)
                                })
                            }
                        </Row>
                        <Row className="dashboard-power">
                            <Col className="power-left" span={6}>
                                <span className="power-left-name">总算力</span>
                                <img src={powerAll} />
                                <p><big>{power}</big> TH/S</p>
                                <Button type="primary">购买更多</Button>
                            </Col>
                            <Col className="power-right" span={17}>
                                <img src={powerDetail} />
                                <div className="power-desc">
                                    <p className="power-right-name">总产出</p>
                                    <p className="power-num"><big>{output}</big> {coinList && coinList[coinIndex].name}</p>
                                    <p className="power-price">≈ ${Funs.toNum(price)}</p>
                                </div>
                            </Col>
                        </Row>
                        <Row justify="space-between" align="middle">
                            <Col className="dashboard-title">每日产出</Col>
                            <Col><span>最近14天</span> <a>更多> </a></Col>
                        </Row>
                        <Table dataSource={dataSource} columns={columns} pagination={false} loading={load} />
                        <Row justify="space-between" align="middle">
                            <Col className="dashboard-title">每单产出</Col>
                            <Col>
                                <div className="dashboard-type">
                                    {
                                        typeList.map((value, index) => {
                                            return typeItem(value, index)
                                        })
                                    }
                                </div>
                            </Col>
                        </Row>
                        <Table dataSource={dataSource} pagination={false} loading={load}>
                            <Column title="订单号" dataIndex="orderId" key="orderId" />
                            <Column title="累计产出" dataIndex="award" key="award" />
                            <Column title="算力" dataIndex="power" key="power" />
                            <Column title="剩余期数/总期数" dataIndex="power" key="power" render={tags => (
                                <>
                                    {
                                        <div>
                                            <p>0天/5天</p>
                                            <Progress percent={30} showInfo={false} strokeColor="#F8B657" strokeLinecap="square" />
                                        </div>
                                    }
                                </>
                            )} />
                            <Column title="电费包" dataIndex="power" key="power"
                                render={tags => (
                                    <>
                                        {
                                            <Button type="primary">已绑定</Button>
                                        }
                                    </>
                                )} />
                            <Column title="" dataIndex="bind" key="bind" render={tags => (
                                <>
                                    {
                                        <span>{tags ? "去绑定" : ''}</span>
                                    }
                                </>
                            )} />
                        </Table>
                    </Col>
                </Row>
            </Content>
            <FooterBox />
        </Layout>
    )
}

export default Home